<template>
  <div class="root-container">
    <div
      style="
        margin-bottom: 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 0 12px;
      "
    >
      <VersionIndicator />
      <!-- <el-button type="info" link size="small">
        <el-icon><InfoFilled /></el-icon>
        <span>{{ verDiff }}</span>
      </el-button>
      <el-button type="info" link @click="handleRefresh" size="small">
        <el-icon :class="[isLoading ? 'is-loading' : '']"><Refresh /></el-icon>
        <span>立即更新</span>
      </el-button> -->
      <!-- <el-switch
        v-model="showAllSeat"
        inline-prompt
        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
        active-text="全部席位"
        inactive-text="相邻席位"
        size="small"
      /> -->
      <el-radio-group v-model="showAllSeat" size="small">
        <el-radio-button :value="true">全部</el-radio-button>
        <el-radio-button :value="false">相邻</el-radio-button>
      </el-radio-group>
    </div>
    <div
      v-for="seat in status"
      class="item-container"
      :style="{
        border: `1px solid ${
          commonStore.darkMode ? seat.defaultColor : seat.color
        }`,
        borderLeft: `10px solid ${
          commonStore.darkMode ? seat.defaultColor : seat.color
        }`,
        backgroundColor: `${
          commonStore.darkMode ? seat.defaultColor : seat.color
        }10`,
      }"
    >
      <div
        class="item-container-frequency"
        :style="{
          color: commonStore.darkMode ? seat.defaultColor : seat.color,
        }"
      >
        <div
          class="cell cell-title"
          style="transform: translateY(4px); font-size: 18px"
        >
          {{ seat.logicSectorCode }}
        </div>
        <div class="cell cell-title" style="transform: translateY(-4px)">
          {{ seat.frequency }}
        </div>
      </div>
      <div class="item-container-detail">
        <div class="cell cell-detail">
          <el-tag
            v-for="code in seat.sectorCodes"
            size="small"
            type="info"
            class="tag-inline"
            >{{ code }}</el-tag
          >
          <el-tag
            v-if="seat.sectorCodes.length == 0"
            size="small"
            type="danger"
            class="tag-inline"
          >
            未分配扇区
          </el-tag>
        </div>
        <div class="cell cell-detail">
          <el-tag type="info" size="small">暂不提供此信息</el-tag>
          <!-- <el-tag
            v-for="user in seat.users"
            size="small"
            :type="matchType(seat.users, user)"
            :class="['tag-inline', user.seatRole == '学员' ? 'vibrate-fast' : '']"
          >
            <el-icon v-if="user.seatPost == '管制岗'"><Service /></el-icon>
            <el-icon v-else-if="user.seatPost == '协调岗'"><Phone /></el-icon>
            <el-icon v-else><View /></el-icon>
            <span>{{ user.name }}</span>
          </el-tag>
          <el-tag
            v-if="
              seat.users.filter((u) => u.role != '学员' && u.seatPost == '管制岗')
                .length == 0
            "
            size="small"
            type="danger"
            class="tag-inline"
          >
            管制席未打卡
          </el-tag>
          <el-tag
            v-if="
              seat.users.filter((u) => u.role != '学员' && u.seatPost == '协调岗')
                .length == 0
            "
            size="small"
            type="danger"
            class="tag-inline"
          >
            协调席未打卡
          </el-tag> -->
        </div>
        <div class="cell cell-detail">
          <el-button
            size="small"
            type="info"
            link
            @click="frequencyView.open(seat)"
            class="tag-inline"
          >
            <el-icon><Microphone /></el-icon>
            <span>频率</span>
          </el-button>
          <el-button
            size="small"
            type="info"
            link
            @click="colorView.open(seat)"
            class="tag-inline"
          >
            <el-icon><Brush /></el-icon>
            <span>颜色</span>
          </el-button>
          <el-button
            size="small"
            type="info"
            link
            class="tag-inline"
            @click="showSeatDetails(seat)"
            disabled
          >
            <el-icon><InfoFilled /></el-icon>
            <span>详情</span>
          </el-button>
        </div>
      </div>
    </div>
    <FrequencyView ref="frequencyView" />
    <ColorView ref="colorView" />
  </div>
</template>

<script setup>
import { h, ref, computed, nextTick, watch, onMounted, onUnmounted } from "vue";
import { ElMessage } from "element-plus";
import dayjs from "dayjs";

import useSeatStore from "@/store/seat.js";
import useCommonStore from "@/store/common.js";

import VersionIndicator from "../common/VersionIndicator.vue";
import FrequencyView from "./frequency.vue";
import ColorView from "./color.vue";

import showSeatDetails from "../common/showSeatDetails.js";

const commonStore = useCommonStore();
const seatStore = useSeatStore();

const frequencyView = ref();
const colorView = ref();

const concernedSectors = ["WTWR", "ETWR", "1TWR1", "1TWR2", "2TWR1"];

const concernedSeat = [];

const isConcerned = (seat = "", codes = []) => {
  if (concernedSeat.includes(seat)) {
    return true;
  }
  for (let i = 0; i < codes.length; i++) {
    for (let j = 0; j < concernedSectors.length; j++) {
      if (codes[i] == concernedSectors[j]) {
        return true;
      }
    }
  }
  return false;
};

const isLoading = ref(false);

const handleRefresh = () => {
  isLoading.value = true;
  seatStore.refreshSeatStatusTWR(true).then(() =>
    seatStore.getSeatStatusTWR().then(() => {
      isLoading.value = false;
      ElMessage("塔台席位信息已更新");
    })
  );
};

const showAllSeat = ref(false);

const status = computed(() => {
  let status = seatStore.seatStatus.filter(
    (seat) => seat.orgGroup == "TWR" && seat.users.length > 0
  );
  status.sort((a, b) =>
    b.seatDepartment == a.seatDepartment
      ? b.seatDepartment - a.seatDepartment
      : b.seatName - a.seatName
  );

  let notConcernedStatus = showAllSeat.value
    ? status.filter((seat) => !isConcerned(seat.seatName, seat.sectorCodes))
    : [];

  let concernedStatus = status.filter((seat) =>
    isConcerned(seat.seatName, seat.sectorCodes)
  );

  let output = new Array();
  output.push(...concernedStatus);
  output.push(...notConcernedStatus);

  return output;
});

const matchType = (users, user) =>
  user.seatRole == "教员" || user.seatRole == "学员"
    ? "success"
    : users.filter((u) => u.seatPost == user.seatPost && u.role == "管制")
        .length > 1
    ? "warning"
    : "info";
</script>

<style scoped>
@import "@/styles/shake.css";
@import "@/styles/vibrate.css";
@import "../common/listStyle.css";
</style>
